import { ASelectIcon } from './select.abstract';
import { mainColor, commonColor, DefaultPastColor } from '../variate';
import { createElement } from '../../../utils/dom-helper';
import { ColorHelper } from '../../../utils/color-helper';
import { ColorPicker } from '../component/color-picker';

// class ArrayProxy {
//     constructor(protected maxLength: number) {

//     }
//     push() {

//     }
// }
export class ColorPanel  extends ASelectIcon {
    protected pastColorProxy: string[] = [];
    protected pastColorContainerEle: HTMLElement;
    constructor() {
        super();
    }
    protected createEles() {
        let mainColorContainer = createElement('div', {"class": 'content'});
        let mainBoxs: HTMLElement[] = [];
        for(let color of mainColor) {
            let colorBoxEle = this.createColorBox(color);
            colorBoxEle.addEventListener('click', () => {
                this.pastColorProxy.push(colorBoxEle.getAttribute('zval'));
            });
            mainBoxs.push(colorBoxEle)
        }
        this.appendChilds(mainColorContainer, mainBoxs);
        let groupContainer = createElement('div', {"class": 'content-group'});
        for(let group of commonColor) {
            let col = createElement('div', {"class": 'group-col'});
            let tempEles: HTMLElement[] = [];
            for(let color of group) {
                let colorBoxEle = this.createColorBox(color);
                colorBoxEle.addEventListener('click', () => {
                    console.log('dfsad');
                    this.pastColorProxy.push(colorBoxEle.getAttribute('zval'));
                });
                tempEles.push(colorBoxEle);
            }
            this.appendChilds(col, tempEles);
            groupContainer.appendChild(col);
        }
        this.container.appendChild(mainColorContainer);
        this.container.appendChild(groupContainer);
        this.pastColorContainerEle = createElement('div', {"class": 'past-group'});
        this.container.appendChild(this.pastColorContainerEle);
        let colorpickerHoverItem = createElement('div', 'z-color-pick-hover-show');
        this.container.appendChild(colorpickerHoverItem);
        colorpickerHoverItem.innerHTML = `
            <div class="z-color-select-option-item">
                <span class="icon iconfont icon-color"></span>
                <span class="z-txt">自定义颜色</span>
            </div>
        `;
        
        // document.querySelector('body').appendChild(picker.getContainerDom());
            let picker = new ColorPicker();
            let container = createElement('div', {'class': 'z-put-color-pick', style: ''})
            // console.dir(colorpickerHoverItem.querySelector('.z-put-color-pick'));
            container.appendChild(picker.getContainerDom());
            colorpickerHoverItem.appendChild(container);
            container.style.display = 'none';
            colorpickerHoverItem.addEventListener('mouseenter', () => {
                container.style.display = 'block';
                picker.init();
            });
            colorpickerHoverItem.addEventListener('mouseleave', () => {
                container.style.display = 'none';
            });
            colorpickerHoverItem.addEventListener('click', (evt) => {
                evt.stopPropagation();
                evt.preventDefault();
            })
            picker.selectColorChange$.subscribe(res => {
                this.pastColorProxy.push(`rgba(${res.r},${res.g},${res.b},${res.a})`);
            });
            // picker.init();

        // picker.init();
        // 
        this.pastColorProxy = new Proxy([], {
            // @ts-ignore
            get: (target, idx: number) => {
                return target[idx];
            },
            // @ts-ignore
            set: (target, idx: number, value: string) => {
                if(<any>idx != 'length') {
                    let ele = this.createColorBox(value);
                    if(target.length > 0) {
                        this.pastColorContainerEle.insertBefore(ele, this.pastColorContainerEle.children[0]);
                    } else {
                        this.pastColorContainerEle.appendChild(ele);
                    }
                    if(this.pastColorContainerEle.children.length >= 10) {
                        this.pastColorContainerEle.children[9].remove();
                    }
                } else {
                    if(<any>value > 9) {
                        (<any>target)[idx] = 9;
                    } else {
                        target[idx] = value;
                    }  
                }
                return true;
            }
        });
        for(let color of DefaultPastColor) {
            let rgb = ColorHelper.HexToRGB(color);
            this.pastColorProxy.unshift(`rgba(${rgb[0]},${rgb[1]},${rgb[2]},1)`)
        }
    }
    protected createValue(evt: MouseEvent & {target: HTMLElement}) {
        return evt.target.getAttribute('zval');
    }
    protected statusChange() {

    }
    protected createColorBox(color: string): HTMLElement {
        let colorContainer = createElement('span', {'class': `color-box-container`,zVal:  color});
        if(color !== 'rgba(255, 255, 255,1)') {
            colorContainer.appendChild(createElement('span', {'class': `color-box`,zVal:  color, style: `background-color: ${color}`})); 
        } else {
            colorContainer.appendChild(createElement('span', {'class': `color-box`,zVal:  color, style: `background-color: ${color};border: 1px solid #eee;`}));
        }
        return colorContainer;
    }
}